import { Text, StyleSheet, View ,ImageBackground, Platform,ScrollView,TextInput,Image,AsyncStorage,Alert,TouchableOpacity} from 'react-native'
import React, { Component } from 'react'
import * as Animatable from 'react-native-animatable'
// yarn add react-native-animatable
// import LinearGradient from 'react-native-linear-gradient'


export default class Login extends Component {
  constructor(){
    super()

    this.state={
      username:'',
      password:'',
      SecureTextEntry:true,
      validateUsername:false,
      isValiduser:true,
      validateUserpsw:false,
      isValidpws:true
    }
  }

  valdateUsername=(val)=>{
    if(val.trim().length==6){
      this.setState({
        username:val,
        validateUsername:true,
        isValiduser:true,
      })
    }else{
      this.setState({
        username:val,
        validateUsername:false,
        isValiduser:false
      })

    }
  }

  valdatePassword=(val)=>{
    if(val=='123456'){
      this.setState({
        password:val,
        validateUserpsw:true,
        isValidpws:false
      })
    }else{
      this.setState({
        password:val,
        validateUserpsw:false,
        isValidpws:false
      })

    }
  }

  handleValideUser=(val)=>{
    // if(val.trim().length==6){
    if(val=='123456'){
      this.setState({
        isValiduser:true
      })
    }else{
      this.setState({
        isValiduser:false
      })

    }
  }

  clickBtn() {
    alert("点击搜索");
  }

  updateSecureTextEntry=()=>{
    if (this.state.SecureTextEntry)
    {
      this.setState({
        SecureTextEntry:false
      })
    }
      else
    {
      this.setState({
        SecureTextEntry:true
      })
    }
  }

  clickBtn= ()=> {
    alert("11");
  }

  render() {
    return (
      <View style={[styles.container]}>
        <ImageBackground source={require('./bg2.png') }style={[styles.bgimg]}>
          <View style={[styles.header]}>
              <Text style={[styles.headerText]}>
                Welcome to the login
              </Text>
          </View>
       
          <Animatable.View animation={'fadeInUpBig'} style={[styles.footer]}>
            <ScrollView>
              <View style={[styles.action]}>
              <Image source={require('./个人.png') }style={{ width: 20, height: 20 }}></Image>
                <TextInput 
                style={[styles.input]} 
                placeholder="Please enter a user name" 
                value={this.state.username} 
                onChangeText={
                  (val)=>this.valdateUsername(val)}
                onEndediting={(e)=>this.handleValideUser(e.nativeEvent.Text)}
                >
                </TextInput>
                  {
                    this.state.validateUsername
                    ?
                    <Animatable.View animation='bounceIn'>
                      <Image source={require('./yes.png') }style={{ width: 20, height: 20 }}></Image>
                    </Animatable.View>

                    :
                    null
                  }
              </View>
              {
                this.state.isValiduser
                ?
                null
                :
                <Animatable.View animation='fadeInLeft'>
                  <Text style={[styles.err]}>Requires a six-digit username</Text>
                </Animatable.View>
              }

             {/* 密码 */}
              <View style={[styles.action]}>
                <Image source={require('./密码.png') }style={{ width: 20, height: 20 }}></Image>
                <TextInput
                secureTextEntry={this.state.SecureTextEntry?true:false}
                // secureTextEntry={true}
                style={[styles.input]} 
                placeholder="Please enter a password" 
                value={this.state.password} 
                onChangeText={
                  (val)=>this.valdatePassword(val)}
                >
                </TextInput>
                {/* <TouchableOpacity style={[styles.btn]}  onPress={this.clickBtn()}> */}
                <TouchableOpacity onPress={this.updateSecureTextEntry}>
                  {
                    this.state.SecureTextEntry
                    ?
                    <Text>
                      <Image source={require('./cansee.png') }style={{ width: 20, height: 20 }}></Image>
                    </Text>
                    :
                    <Text>
                      <Image source={require('./cantsee.png') }style={{ width: 20, height: 20 }}></Image>
                    </Text>
                  }
                </TouchableOpacity>
              </View>
              {
                 this.state.validateUserpsw
                 ?
                 <Animatable.View animation='bounceIn'>
                   <Text>
                     密码正确
                   </Text>
                 </Animatable.View>

                 :
                 null
              }
               <TouchableOpacity
                    style={styles.textCenter}
                    underlayColor='gray'
                    onPress={() => this.onLogin(this.state.username, this.state.password)}>
                    <Text style={styles.button}>login</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.textCenter}
                    underlayColor='gray'
                    // onPress={() => this.onLogin(this.state.username, this.state.password)}
                    onPress={this.clickBtn}
                    >
                    <Text style={styles.button}>register</Text>
                </TouchableOpacity>
             
            </ScrollView>
          </Animatable.View>  
        </ImageBackground>           
      </View>
      // <View>
      //                   <TouchableOpacity
      //               style={styles.textCenter}
      //               underlayColor='gray'
      //               // onPress={() => this.onLogin(this.state.username, this.state.password)}
      //               onPress={this.clickBtn}
      //               >
      //               <Text style={styles.button}>register</Text>
      //           </TouchableOpacity>
      // </View>       

    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,

  },
  bgimg:{
    flex:1,
    resizeMode:'cover'
  },
  header:{
    flex:1,
    justifyContent:'flex-end',
    paddingHorizontal:20,
    paddingBottom:250
  },
  headerText:{
    color:'#fff',
    fontWeight:'bold',
    fontSize:30,
    textAlign:'center'
  },
  footer:{
    flex:3,
    backgroundColor:'#fff',
    borderTopLeftRadius:40,
    borderTopRightRadius:40,
    paddingHorizontal:20,
    paddingVertical:20,
  },
  action:{
    flexDirection:'row',
    marginTop:5,
    borderBottomWidth:1,
    borderBottomColor:'gray',
    paddingBottom:5
  },
  input:{
    flex:1,
    marginTop:-12,
    paddingLeft:10,
    color:'#05375a'
  },
  err:{
    color:'tomato',
    fontSize:14
  },
  btn:{
    width:55,
    marginLeft:5,
    marginRight:5,
    backgroundColor:"#2873ff",
    height:45,
    justifyContent:"center",
    alignItems:"center"
},
button: {
  color: '#3F83FE',
  fontSize: 20,
},
textCenter: {
  height: 50,
  marginTop: 50,
  backgroundColor: '#87CEFA',
  justifyContent: 'center',
  alignItems: 'center',
  width:200,
  marginLeft:100
}

})